
import './App.css';

function Item({name, isXianshi}){
  let itemContent = name;
  if(isXianshi){
    // itemContent = name+'√'
    itemContent=(<del>{name+"√"}</del>);
  }
  return (
    <li className='item'>
      {itemContent}
    </li>
    );
}
  
  
  // 当 isPacked 为真值时，则（&&）渲染勾选符号，否则，不渲染。”
  // return(
  //   <li className="item">
  //     {name}{isXianshi&&'√'}
  //   </li>);

  // 三目运算符
  // return(
  //   <li className="item">
  //     {/* {isXianshi ? name + '√' : name} */}
  //     {isXianshi?(<del>{name+'√'}</del>):(name)}
  //   </li>
  // );

  // if判断是否显示
  // if (isXianshi) {
  //   return <li className="item">{name}√</li>
  // }
  // return <li className="item">{name}</li>
// }

function App() {
  return (
    <section>
      <h1>行李清单</h1>
      <ul>
        <Item
          isXianshi={true}
          name="宇航服"
        />
        <Item
          isXianshi={false}
          name="头盔"
        />
        <Item
          isXianshi={true}
          name="照片"
        />
      </ul>
    </section>
  );
}


export default App;
